<template>
  <div class="search">
    <div>
      <span>模板名称：</span>
      <el-input v-model="searchValue.name" placeholder="请输入模板名称" />
    </div>
    <div>
      <span>签名：</span>
      <el-select v-model="searchValue.signatureId" class="m-2" placeholder="请选择">
        <el-option v-for="item in signatureDataList" :key="item.id" :label="item.name" :value="item.id" />
      </el-select>
    </div>
    <div>
      <span>短信内容：</span>
      <el-input v-model="searchValue.messageContent" placeholder="请输入短信内容" />
    </div>
    <div>
      <span>状态：</span>
      <el-select v-model="searchValue.status" class="m-2" placeholder="请选择">
        <el-option v-for="item in templateSatus" :key="item.id" :label="item.name" :value="item.id" />
      </el-select>
    </div>
    <div>
      <span>模板类型：</span>
      <el-select v-model="searchValue.type" class="m-2" placeholder="请选择">
        <el-option v-for="item in templateType" :key="item.id" :label="item.name" :value="item.id" />
      </el-select>
    </div>
    <div>
      <span>短信类型：</span>
      <el-select v-model="searchValue.messageType" class="m-2" placeholder="请选择">
        <el-option v-for="item in messageTypeList" :key="item.id" :label="item.name" :value="item.id" />
      </el-select>
    </div>


    <el-button type="primary" :icon="Search" @click="handleSearch" style="margin-left: 30px;">
      Search
    </el-button>

    <el-popover placement="right" :width="400" trigger="hover">
      <template #reference>
        <el-button type="primary" :icon="Plus" style="margin-left: 10px;">创建短信模板</el-button>
      </template>
      <div class="buttons">
        <el-button @click="handleAdd('common')">普通短信模板</el-button>
        <el-button @click="handleAdd('ai')">智能短信模板</el-button>
        <el-button @click="handleAdd('multi')">多媒体短信模板</el-button>
      </div>
    </el-popover>




    <el-button type="warning" :icon="Refresh" @click="handleReset" style="margin-left: 10px;">
      重置
    </el-button>
  </div>
  <div class="table">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="id" label="编号" width="180" />
      <el-table-column prop="typeName" label="模板类型" width="180" />
      <el-table-column prop="name" label="模板名称" />
      <el-table-column prop="signatureName" label="签名" />
      <el-table-column prop="messageTypeName" label="短信类型" />
      <el-table-column prop="messageContent" label="短信内容" />
      <el-table-column prop="messionId" label="短链任务ID" />
      <el-table-column prop="status" label="状态" />
    </el-table>
    <el-pagination layout="sizes, prev, pager, next" v-model:page-size="pageSize" v-model:current-page="pageNum"
      :page-sizes="[100, 200, 300, 400]" v-model:total="total" style="justify-content: flex-end;"></el-pagination>
  </div>


  <el-dialog title="创建短信模板" v-model="dialogVisible" width="45%">
    <el-form ref="ruleFormRef"  :rules="rules" :model="tempalteForm" label-width="120px">
      <el-form-item label="短信模板名称" prop="name">
        <el-input v-model="tempalteForm.name"></el-input>
      </el-form-item>
      <el-form-item label="短信类型" prop="messageType">
        <el-radio-group v-model="tempalteForm.messageType" @change="handleChange" >
          <el-radio :label="1">挂机短信</el-radio>
          <el-radio :label="2">群发短信</el-radio>
          <el-radio :label="3">第三方挂机短信</el-radio>
        </el-radio-group>
      </el-form-item>
      <div class="note">*请按实际场景选择短信类型，选择了不合适的类型会导致短信发送异常</div>
      <el-form-item label="短信签名" prop="signatureId">
        <el-select v-model="tempalteForm.signatureId"  placeholder="请选择">
        <el-option v-for="item in signatureDataList" :key="item.id" :label="item.name" :value="item.id" />
      </el-select>
      </el-form-item>

      <el-form-item label="短信文案" prop="messageContent">
        <el-input v-model="tempalteForm.messageContent" type="textarea"></el-input>
      </el-form-item>


        <el-form-item label="json" prop="json" v-if="jsonflag">
        <el-input v-model="tempalteForm.templateJson" type="textarea"></el-input>
      </el-form-item>

      
    </el-form>
    <template #footer>
      <el-button @click="cancel()">Cancel</el-button>
      <el-button type="primary" @click="save()">Submit</el-button>
    </template>
  </el-dialog>


  <!-- <el-dialog title="创建智能短链模板" v-model="aiDialogVisible" width="45%">
    <el-steps :active="active" finish-status="success">
    <el-step title="设定短信内容" />
    <el-step title="设定短链内容" />
  </el-steps>
    <el-form ref="ruleFormRef"  :rules="rules" :model="tempalteForm" label-width="120px" >
      <el-form-item label="短信模板名称" prop="name">
        <el-input v-model="tempalteForm.name"></el-input>
      </el-form-item>
      <el-form-item label="短信类型" prop="messageType">
        <el-radio-group v-model="tempalteForm.messageType" @change="handleChange" >
          <el-radio :label="1">挂机短信</el-radio>
          <el-radio :label="2">群发短信</el-radio>
          <el-radio :label="3">第三方挂机短信</el-radio>
        </el-radio-group>
      </el-form-item>
      <div class="note">*请按实际场景选择短信类型，选择了不合适的类型会导致短信发送异常</div>
      <el-form-item label="短信签名" prop="signatureId">
        <el-select v-model="tempalteForm.signatureId"  placeholder="请选择">
        <el-option v-for="item in signatureDataList" :key="item.id" :label="item.name" :value="item.id" />
      </el-select>
      </el-form-item>

      <el-form-item label="短信文案" prop="messageContent">
        <el-input v-model="tempalteForm.messageContent" type="textarea"></el-input>
      </el-form-item>


        <el-form-item label="json" prop="json" v-if="jsonflag">
        <el-input v-model="tempalteForm.templateJson" type="textarea"></el-input>
      </el-form-item>

      
    </el-form>
    <template #footer>
      <el-button @click="cancel()">Cancel</el-button>
      <el-button type="primary" @click="save()">Submit</el-button>
    </template>
  </el-dialog> -->
</template>

<script setup>
import { reactive, ref, onMounted } from 'vue';
import { Search, Plus, Refresh } from '@element-plus/icons-vue';
import { templateStatusList } from '@/api/templateStatus'
import { signatureList } from '@/api/signature'
import { templateTypeList } from '@/api/templateType'
import { templateMessageTypeList } from '@/api/templateMessageType'
import { templateData } from '@/api/template'
import { ElButton, ElDropdown, ElDropdownMenu, ElDropdownItem, ElMessage } from 'element-plus';


const active = ref(0)

const aiDialogVisible=ref(false)

const searchValue = reactive({
  name: '',
  signatureId: '',
  messageContent: '',
  tempalteId: '',
  status: '',
  type: ''
});



const resetSearchValue = reactive({
  name: '',
  signatureId: '',
  messageContent: '',
  tempalteId: '',
  status: '',
  type: ''
});
const signatureDataList = reactive([]);

const templateSatus = reactive([]);
const templateType = reactive([]);
const messageTypeList = reactive([]);

const tableData = reactive([

]);
const pageSize = ref(100);
const total = ref();
const pageNum = ref(1)
const ruleFormRef = ref();

const dialogVisible = ref(false);

const tempalteForm = reactive({
  messageType: 1
});

const resetTemplateForm=reactive({
  messageType: 1
})


const jsonflag=ref(false)

const rules = reactive({
  name: [
    { required: true, message: '请输入模板名称', trigger: 'blur' },
  ],
  messageType:[
    { required: true, message: '请选择短信类型', trigger: 'blur' },
  ],
  signatureId:[
  { required: true, message: '请选择短信签名', trigger: 'blur' },
  ],
  messageContent:[
  { required: true, message: '请输入短信内容', trigger: 'blur' },
  ],
  json:[
  { required: true, message: '请输入json', trigger: 'blur' },
  ]
})

const resetForm=()=>{
   // 将所有属性设置为空字符串
   Object.keys(tempalteForm).forEach(key => {
    tempalteForm[key] = resetTemplateForm[key]
  })
}

const handleChange =(val)=>{
  if(val == 3){
    jsonflag.value=true
  }else{
    jsonflag.value=false
  }
}

const cancel=()=>{
  dialogVisible.value= false
  resetForm()
}


// 保存
const save = () => {
  ruleFormRef.value.validate(valid => {   // valid就是校验的结果
    if (valid) {
      // console.log(tempalteForm)

      // request.request({
      //   url: '/notice',
      //   method: state.form.id ? 'put' : 'post',
      //   data: state.form
      // }).then(res => {
      //   if (res.code === '200') {
      //     ElMessage.success('保存成功')
      //     dialogFormVisible.value = false
      //     load()  // 刷新表格数据
      //   } else {
      //     ElMessage.error(res.msg)
      //   }
      // })
    }
  })
}

// 新增
const handleAdd = (type) => {
  dialogVisible.value = true
  // console.log(dialogVisible)
}


function handleReset() {
  // 将所有属性设置为空字符串
  Object.keys(searchValue).forEach(key => {
    searchValue[key] = resetSearchValue[key]
  })
  initData()
}

function handleSearch() {
  let data = {
    pageNum: pageNum.value,
    pageSize: pageSize.value,
    ...searchValue
  };
  // console.log(data)
  templateData(data).then(res => {
    if (res.code === "200") {
      total.value = res.data.total;
      tableData.length = 0
      tableData.push(...res.data.records)
    }
  })
}

function initData() {
  let data = {
    pageNum: pageNum.value,
    pageSize: pageSize.value,
  };
  templateData(data).then(res => {
    if (res.code === "200") {
      total.value = res.data.total;
      tableData.length = 0
      tableData.push(...res.data.records)
    }
  })
}
function initTemplateStatusData() {
  templateStatusList().then(res => {
    if (res.code === "200") {
      templateSatus.length = 0;
      templateSatus.push(...res.data)
    }
  })
}

function initSignatureData() {
  signatureList().then(res => {
    if (res.code === "200") {
      signatureDataList.length = 0;
      signatureDataList.push(...res.data)
    }
  })
}


function initTemplateTypeData() {
  templateTypeList().then(res => {
    if (res.code === "200") {
      templateType.length = 0;
      templateType.push(...res.data)
    }
  })
}

function initTemplateMessageTypeData() {
  templateMessageTypeList().then(res => {
    if (res.code === "200") {
      messageTypeList.length = 0;
      messageTypeList.push(...res.data)
    }
  })
}


initData();
initTemplateStatusData();
initSignatureData();
initTemplateTypeData();
initTemplateMessageTypeData();
onMounted(() => { });
</script>

<style lang="scss" scoped>
.search {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-top: 5px;
  padding-top: 25px;
  padding-bottom: 30px;
  background-color: white;

  &>div {
    display: flex;
    align-items: center;
    margin-left: 35px;
    margin-bottom: 15px;

    &>span {
      white-space: nowrap;
    }
  }
}

.table {
  margin-top: 10px;
}

.buttons {
  display: flex;
  justify-content: center;
}

.note {
  margin-left: 100px;
  margin-bottom: 10px;
}
</style>
